<template>
    <div class="recommended-manager">
        <div class="manager-content">
            <skeleton 
            :loading="loadingController" 
            >
                <template v-if="tableData && tableData.length > 0">
                    <div class="items" v-for="(item, index) in tableData" :key="index">
                        <content-item
                        :data="item"
                        :title="`${index + 1}.${item.name}(${item.company})`"
                        :rowguid="item.notice"
                        @titleClick="projectTitleClick"
                        v-czc="['首页', '点击列表', '项目经理列表', index , 'home-list-managerList']"
                        >
                            <span slot="time"></span>

                            <span class="re-collect" slot="icon">
                                <collect-star
                                    :data="{objectguid: item.guid, objectname: item.notice, objecttype: noticeCollType(item.noticetype), marktype: 'collect',}"
                                    :defaultVal="item.bj === '1'"
                                ></collect-star>
                            </span>  

                            <template slot="content">
                                <div class="item-info">
                                    <div class="row">
                                        <div class="number info-item">
                                            {{item.fzrtype == 'zbfzr' ? '招标数：' : '中标数：'}}
                                            {{item.nums}}
                                        </div>
                                        <div class="date info-item">
                                            {{item.fzrtype == 'zbfzr' ? '最新招标日期：' : '最新中标日期：'}}
                                            {{item.recentdate || '-'}}
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="pro-name info-item">
                                            {{item.fzrtype == 'zbfzr' ? '招标项目：' : '中标项目：'}}
                                        </div>

                                        <div class="info-item">
                                            <el-link 
                                            type="primary" 
                                            :underline="false" 
                                            @click="projectTitleClick(item)"
                                            >
                                                {{item.notice || '-'}}
                                            </el-link>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            <template slot="tag">
                            
                            </template>
                        </content-item>
                    </div>
                </template>

                <empty-list v-if="!tableData.length">
                    <span>暂无数据</span>
                </empty-list>
            </skeleton>
        </div>

        <my-pagination
            class="pagination"
            ref="page"
            v-model="tableData"
            :action="`${$store.state.api.tbUrl}/searchrelated/managerlist.json`"
            :search="pgData"
            :auto-show="false"
            :afterQuery="managerAfterQuery"
            :loading.sync="loadingController"
        ></my-pagination>
        

    </div>
</template>

<script>
import notice from '@/mixins/notice.js';

import Skeleton from '../../../components/skeleton.vue';
import contentItem from "../../../components/item.vue";
import EmptyList from "@components/sys/empty-list";
import CollectStar from '@components/sys/collect.vue';

export default {
    mixins: [notice],
    props:{
        searchStr:{
            type:String,
            default:''
        },
    },
    components: {
        Skeleton,
        contentItem,
        EmptyList,
        CollectStar,
    },
    data() {
        return {
            loadingController: true,
            
            tableData:[],
        };
    },
    computed: {
        pgData:function(){

            let search = {
                sortname: 'name',
                name:this.searchStr,
                pagesize: 10,
                sortorder: 'asc',
            }
            return search;
        }
    },
    methods: {
        deSearch(){
            this.$refs.page.queryData();
        },       
        reload(){
            this.$refs.page.reload();
        },

        projectTitleClick(data){
            this.openNotice(data.guid, data.noticetype , true);
        },

        managerAfterQuery(rows , data) {
            this.setCzc(['首页', '翻页' , '项目经理列表', this.$refs.page.currentPage ,'home-page-managerLookup'])
        },
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";

.recommended-manager {

    .manager-content {
        .items {
            & + .items {
                margin-top: 16px;
            }

            .item-info {
                margin-top: 10px;

                .row{
                    display: flex;
                    align-items: center;
                    
                    & + .row{
                        margin-top: 6px;
                    }

                    .info-item {
                        display: flex;
                        font-size: 12px;
                        color: $infoColor;
                    }
                }
            }

            .re-collect {
                display: inline-block;
                position: relative;
                top:30px;
                z-index: 999;
            }
        }
    }

    .pagination{
        margin-top: 20px;
    }
}
</style>